<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue中的插槽（slot）</title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<div id="root">
        	<child>
        		<!--<div class="header" slot="header">header</div>-->
        		<div class="footer" slot="footer">footer</div>
        	</child>
        </div>
		
		<script>
			
			Vue.component("child", {
				template:  `<div>
								<slot name="header">
									<h1>default header</h1>
								</slot>
							    <div class="content">content</div>
								<slot name="footer">default footer</slot>
						    </div>`
			})
			
			var vm = new Vue({
				el: '#root',
			})
			
		</script>
	</body>
</html>
